<template>
  <view class="container">
    <BhTitle titleText="上传商铺照片" :custom-click-back="1" @click-back="clickBack"></BhTitle>
    <view style="background-color: white;">
      <view class="header bh-row bh-justify-space-between">
        <view>请至少上传1张正面商铺照，图片越多审核越快</view>
        <!-- <image src="../images/post_add/post_add_tip_close.svg" mode="scaleToFill" class="header-close" /> -->
      </view>
      <view class="title">
        商铺照片
      </view>
      <view class="count-wrap bh-row bh-justify-space-between">
        <view class="count-pic">上传照片</view>
        <view class="count-number">{{ facadePictureAry.length }}/7</view>
      </view>
      <view class="upload-wrap bh-row bh-justify-start">
        <view class="pic-btn" @click="() => { this.showAddPostPicSheet = true }">
          <image src="../images/post_add/post_add_camera.svg" mode="scaleToFill" class="pic-cam" />
        </view>
        <!-- <view v-if="facadePictureAry" class="pic-wrap" v-for="(item,index) in facadePictureAry" :key="index" >
          <image :src="item" mode="scaleToFill" class="pic" />
          <image @click="onDelPicture(index)" :src="item" mode="scaleToFill" class="pic-del-btn" />
        </view> -->
        <view v-if="facadePictureAry" v-for="(item, index) in facadePictureAry" :key="index" class="pic-wrap">
          <image @click="previewImg(index)" :src="item" mode="scaleToFill" class="pic"></image>
          <image @click="onDelPicture(index)" src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
        </view>
        <!-- <view class="pic-wrap">
          <image src="../images/post_add/post_add_pic_test.png" mode="scaleToFill" class="pic" />
          <image src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
        </view> -->
      </view>

      <view class="add-more">
        <view class="add-more-divider"></view>
        <view>添加更多图片</view>
      </view>
    </view>

    <view class="continue" @click="postAdd('pic', toDelImages)">
      保存
    </view>
    <show-add-post-pic-sheet :show="showAddPostPicSheet" @close="() => { this.showAddPostPicSheet = false }" @get-picture="onGetPicture">
    </show-add-post-pic-sheet>

  </view>
</template>

<script>
import { BackendApi } from '../../api/backend_api';
import showAddPostPicSheet from '@/PostPage/custom_views/show-add-post-pic-sheet.vue';
import { custUploadImg } from '../../components/custom_views/upload-img';

import { post_add_fake_mixin } from './post_add_fake_mixin'
export default {
  components: {
    showAddPostPicSheet,
  },
  mixins: [post_add_fake_mixin],
  data() {
    let that = this
    return {
      showAddPostPicSheet: false,
      ...post_add_fake_mixin.initData(that),
      toDelImages: '',
      tmpAddImages: '',
    }
  },
  computed: {},
  methods: {
    clickBack(){
      this.delTmpAddImages()
      uni.navigateBack()
    },
    previewImg(index) {
      let urls = this.postDto.facadePicture.split(',')
      uni.previewImage({
        current: index,
        urls: urls
      })
    },
    onGetPicture(uploadParam) {
      console.log('图片开始上传', uploadParam)
      let that = this
      if (that.facadePictureAry.length >= 7) {
        uni.showToast({
          title: '最多上传7张哦',
        })
        return
      }
      let maxNumber = 7 - that.facadePictureAry.length
      // that.postDto.facadePicture = 'https://bh-cmty-1256284809.cos.ap-beijing.myqcloud.com/post/23fc7ae92f394d8b8c8c78ebc8c9fc24.png,https://bh-cmty-1256284809.cos.ap-beijing.myqcloud.com/post/c439176a318c432c825348cd7eb83a9d.ico'
      custUploadImg(that, uploadParam.type, maxNumber, (custRes) => {
        if (custRes.code == 200) {
          console.log('后台返回数据', custRes)
          if (that.postDto.facadePicture) {
            that.postDto.facadePicture = that.postDto.facadePicture + ',' + custRes.data
          } else {
            that.postDto.facadePicture = custRes.data
          }
          that.tmpAddImages = that.tmpAddImages + custRes.data
          console.log('图片数据', that.postDto.facadePicture)
        }
      })
      this.showAddPostPicSheet = false

      // })
      // console.log('上传的图片结果', imgAry)
    },
    onDelPicture(index) {
      let that = this
      uni.showModal({
        title: '删除图片',
        content: '是否删除图片？',
        cancelColor: '#FF6430',
        showCancel: true,
        cancelText: '取消',
        confirmColor: '#666666',
        confirmText: '确定',
        success: function (res) {
          if (res.confirm) {
            console.log('点击了确定', res)
            let ary = that.postDto.facadePicture.split(',')
            let toDelFile = ary[index]
            ary.splice(index, 1)
            that.postDto.facadePicture = ary.join(',')
            that.toDelImages = that.toDelImages + toDelFile
            // BackendApi.v05_tencentCos_delImage({fileUrl: encodeURIComponent(toDelFile)}, false).then(res => {
            //   console.log('删除cos中图片返回', res)
            // })
          } else if (res.cancel) {
            console.log('用户取消注销');
          }
        }
      })
      // let ary = this.postDto.facadePicture.split(',')
      // ary.splice(index, 1)
      // this.postDto.facadePicture = ary.join(',')
    }
  },
  computed: {
    facadePictureAry: {
      get() {
        if (this.postDto.facadePicture) {
          console.log('图片数组', this.postDto.facadePicture.split(','))
          return this.postDto.facadePicture.split(',')
        } else {
          return []
        }

      }
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

page {
  height: 100vh;
}

.container {
  background-color: #F5F9FA;
  width: 100%;
  height: 100vh;
}

.header {
  background: rgba(248, 113, 71, 0.1);
  font-size: 24rpx;
  font-weight: normal;
  line-height: 40rpx;
  letter-spacing: 0px;
  padding: 16rpx 32rpx;

  color: #F87147;

  .header-close {
    width: 36rpx;
    height: 36rpx;
    display: block;
  }
}

.title {
  margin-top: 24rpx;
  margin-left: 32rpx;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 40rpx;
  letter-spacing: 0px;

  color: rgba(0, 0, 0, 0.85);
}

.count-wrap {
  margin-top: 56rpx;
  margin-left: 32rpx;
  font-size: 28rpx;
  font-weight: normal;
  line-height: 40rpx;
  letter-spacing: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 32rpx;

  color: #666666;

  .count-pic {}

  .count-number {}
}

.upload-wrap {
  padding-top: 32rpx;
  padding-left: 32rpx;
  flex-wrap: wrap;
  background-color: white;

  .pic-btn {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    opacity: 1;
    background: #F5F5F5;
    margin-right: 32rpx;
    margin-bottom: 32rpx;

    .pic-cam {
      width: 65rpx;
      height: 54.6rpx;
      margin: auto;
      display: block;
      margin-top: 56rpx;
    }
  }

  .pic-wrap {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    opacity: 1;
    margin-right: 32rpx;
    background: #F5F5F5;
    position: relative;
    margin-bottom: 32rpx;

    .pic {
      width: 100%;
      height: 100%;
    }

    .pic-del-btn {
      width: 50rpx;
      height: 50rpx;
      top: -12.7rpx;
      right: -12.7rpx;
      position: absolute;
    }
  }
}

.add-more {
  background: #FFFFFF;
  font-size: 28rpx;
  font-weight: normal;
  line-height: 40rpx;
  letter-spacing: 0px;
  text-align: center;
  padding-top: 20rpx;
  padding-bottom: 20rpx;

  color: #666666;

  .add-more-divider {
    margin-left: 32rpx;
    margin-right: 32rpx;

    border-bottom: 0.5px solid #EEEEEE;
    margin-bottom: 20rpx;
  }
}

.continue {
  position: absolute;
  bottom: 96rpx;
  left: 70rpx;
  right: 70rpx;
  border-radius: 48rpx;
  opacity: 1;
  padding-top: 42rpx;
  padding-bottom: 42rpx;

  background: #F8D247;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 28rpx;
  text-align: center;
  letter-spacing: 0px;

  color: rgba(0, 0, 0, 0.85);
}
</style>